<html>
<head>
    <title>电量统计</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 300px;
            width: 90%;
        }
        .tab-title{
            margin-top: 20px;
            text-align: center;
            font-size: larger;
            color: #333333;
            font-weight: bold;
        }



    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title"> 综合月报</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree ref="devTree" v-on:click-node="aa" :tabsign="'z'" :energy="energyType"></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-date-picker type="month" v-model="day" value-format="yyyy-MM" placeholder="日期" style="width: 150px;"></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-tooltip effect="dark" content="请点击左边树中设备或区域" v-model="tooltip" placement="right">
                            <el-button type="primary" @click="search" style="background: #578BBB">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>


                        <div class="chart-outer" id="elePowerChart">
                        </div>
                        <div class="chart-outer" id="eleFeeChart">
                        </div>
                        <p class="tab-title">用量费用统计表</p>
                        <el-table  show-summary border stripe style="width: 100%" :data="eleCount">
                            <el-table-column prop="name" label="监控区域" align="center">
                            </el-table-column>
                            <el-table-column prop="totalP" label="总用量" align="center">
                            </el-table-column>
                            <el-table-column prop="totalFee" label="总电费（元）" align="center">
                            </el-table-column>
                        </el-table>

            </el-col>
        </el-row>
    </div>


</div>



<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            day:'',
            tooltip:false,
            tabName:'eleB',
            ChartData:{},
            plan:'',
            expandId:'',
            currentId:'',
            eleCount:[],  //电费电量统计
            paramData:[], //参数表格
            number:2,
            energyType:'',
            dataId:''
        },
        created:function(){

            this.day = TimeUtil.convertToString(new Date()).substr(0,7);

            this.energyType =HttpUtil.getQueryString('energyType');
        },
        mounted:function(){
            this.getChart('elePowerChart','');
            this.getChart('eleFeeChart','');
            this.eleCount=[];
            this.tooltip = true;
        },
        methods:{
            search:function(){

            },
            aa:function(data){
                this.currentId = data.id;

                this.dataId = data.dataId;
                this.getTabData();
            },
            onTabClick(tab, event){


            },
            getTabData:function(){
                var ids =this.currentId.split('_');
                var dArr = this.day.split('-');
                var param={
                    zoneIds:[this.dataId].join(','),
                    energyType:this.energyType,
                    year:dArr[0]||0,
                    month:dArr[1]||0,
                    day:dArr[2]||0,
                };
                switch (ids[0]) {
                    case "Z":  //区域
                       param['zoneType'] = 0;
                        param['sumType'] = 3;
                        break;
                    case 'D':
                        param['zoneType'] = 3;
                        param['sumType'] = 0;
                        break;
                    default:

                        this.getChart('elePowerChart','');
                        this.getChart('eleFeeChart','');
                        this.eleCount=[];
                        return;
                        break;
                }
                // 所有用量统计
                HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                    var usedata = [];
                    for (var item of res.data){
                        var devicedata = {};
                        devicedata={
                            id:item.groupId,
                            name:item.groupName,
                            totalP:item.field04,
                        }
                        usedata.push(devicedata);
                    }
                    //所有费用统计
                    param['energyType']=this.energyType+'2Money'
                    HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{

                        for (var item of res.data){
                            for (var ind in usedata){
                                if (usedata[ind].id == item.groupId){
                                    usedata[ind]['totalFee'] = item.field04;
                                }
                            }

                        }
                        this.eleCount = usedata;

                        //电量电费chart

                        param['energyType']=this.energyType;
                        HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                            var Pchartdata ={};
                            Pchartdata['name'] = res.data[0].groupName;
                            var data=[];
                            for (var item of res.data){
                                for(var i =4;i<35;i++){
                                    var tmp = i;
                                    tmp=tmp<10?String('0'+tmp):(tmp)
                                    data.push(item.field[tmp]||0);
                                }
                            }
                            Pchartdata['data']=data;

                            param['energyType']=this.energyType+'2Money';
                            HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                                var chartdata ={};
                                chartdata['name'] = res.data[0].groupName;
                                var data=[];
                                for (var item of res.data){
                                    for(var i =4;i<35;i++){
                                        var tmp = i;
                                        tmp=tmp<10?String('0'+tmp):(tmp)
                                        data.push(item.field[tmp]||0);
                                    }
                                }

                                chartdata['data']=data;

                                this.getChart('elePowerChart',Pchartdata);
                                this.getChart('eleFeeChart',chartdata);
                            })

                        });
                    })
                });

            },

            getChart:function (id,data) {
                let myChart = echarts.init(document.getElementById(id));
                this.ChartData={
                    title:{
                        text:id=='elePowerChart'?(data.name||'')+'月用量统计':(data.name||'')+'月费用统计',

                    },
                    color: ['#30BFCD', '#234567','#F98317','#ee4f63'],
                    tooltip: {
                        show:true,
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {

                        show : true,

                        feature : {

                            mark : {show: true},

                            dataView : {show: true, readOnly: false},

                            magicType : {show: true, type: ['line', 'bar']},

                            restore : {show: true},

                            saveAsImage : {show: true}

                        }

                    },
                    legend: {
                        data: [],
                        textStyle: { //图例文字的样式
                            color: '#9AA1AA',
                            fontSize: 16
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    series: [{
                        name: id=='elePowerChart'?(data.name||'')+'用量':(data.name||'')+'费用',
                        type: 'bar',
                        stack: 'process',
                        data:data.data
                    },
                    ]
                };
                myChart.setOption( this.ChartData);
            },
        },

    });


</script>

</body>
</html>
